'use strict'

import React, { Component } from 'react'

import { StyleSheet, View, ScrollView, TouchableOpacity, Text, Platform, Image,InteractionManager } from 'react-native'

import BasePage from '../common/BasePage'
import Constants from '../../common/Constants'
import SizeUtils from '../../common/SizeUtils'
import Config from '../../config'
import BaseItem from '../common/BaseItem'
import NoticeIcon from '../user/NoticeIcon'
import CommonViewPagerMultiShow from '../common/CommonViewPagerMultiShow'
import CommonCheckUserTypeAction from '../../actions/common/CommonCheckUserTypeAction'
import UserRequestAPPConfigAction from '../../actions/user/UserRequestAPPConfigAction'
import QuanziRequestQuanziRandomListAction from '../../actions/quanzi/QuanziRequestQuanziRandomListAction'
import RequestQuanziContentAction from '../../actions/quanzi/RequestQuanziContentAction'
import QuanziSendShoucangQuanziAction from '../../actions/quanzi/QuanziSendShoucangQuanziAction'
import RendRequestQuanziHoemTuijianAction from '../../actions/quanzi/RendRequestQuanziHoemTuijianAction'
import QuanziRequestMoreRecommendListAction from '../../actions/quanzi/QuanziRequestMoreRecommendListAction'
import QuanziPostListItemView from './QuanziPostListItemView'
import TImage from '../../components/TImage'
import CommonAvatarView from '../common/CommonAvatarView'
import CommonStyles from '../../common/CommonStyles'

const PAGE_SIZE = 8

class QuanziTuiJianPage extends BasePage {
  constructor(props) {
    super(props)
    this.state = {
      configDataDic: {
        index_mid_buttons: {}
      }
    }
    this.state.data = []
    this._viewPager = null
  }
  componentWillUpdate(nextProps, nextState) {}
  componentDidMount() {
    InteractionManager.runAfterInteractions(()=>{
      this.setState({
        componentReady: true,
      })
      this._requestData()
    })
  }
  _dealEnterPage() {
    setTimeout(() => {
      this._requestData()
    }, 2000)
  }
  render() {
    if (this.state.componentReady === false) {
      return<View/>
    }
    return (
      <View style={this.props.style}>
        {this._renderTitleView()}
        <ScrollView style={{ flex: 1 }}>
          {this._renderViewPage()}
          <View style={{ flexDirection: 'column' }}>
            {this._renderMidView()}
            <View
              style={{
                height: SizeUtils.translateDesignHeightToCode(20),
                backgroundColor: '#eee'
              }}
            />
            {this.state.data.posts &&
              this.state.data.posts.map((data, index) => {
                return this._renderItem(data, index)
              })}
          </View>
        </ScrollView>
      </View>
    )
  }
  _refRefresh() {
    new QuanziRequestMoreRecommendListAction().call(this, {})
  }
  _renderItem(data, index) {
    return (
      <QuanziPostListItemView
        data={data.post}
        user_id={this.props.pageData.routeData.userData.user_id}
        refRefresh={this._refRefresh.bind(this)}
        is_follow={data.is_follow}
        boardName={data.boardName}
        key={index}
      />
    )
  }
  _renderImagesBottom(data) {
    if (!data.image_urls || data.image_urls.length == 0) {
    } else if (data.image_urls.length < 3) {
      return this._renderOneImageBottom(data)
    } else if (data.image_urls.length == 3) {
      return (
        <View
          style={{
            marginTop: SizeUtils.translateDesignHeightToCode(32),
            flexDirection: 'row',
            paddingLeft: SizeUtils.translateDesignWidthToCode(20),
            width: SizeUtils.translateDesignWidthToCode(204 * 3 + 30 * 2),
            justifyContent: 'space-around'
          }}
        >
          {this._renderThreeImageBottom(data)}
        </View>
      )
    }
  }
  _renderOneImageBottom(data) {
    return (
      <View style={{ marginTop: SizeUtils.translateDesignHeightToCode(32) }}>
        <Image
          source={{ uri: data.image_urls[0] }}
          style={{ width: SizeUtils.getWindowSize().width, height: SizeUtils.getWindowSize().width * 0.5 }}
          resizeMode={'cover'}
        />
      </View>
    )
  }
  _renderThreeImageBottom(data) {
    return data.image_urls.map((url, index) => {
      return (
        <TImage
          key={index}
          source={{ uri: url }}
          style={{ width: 204, height: 140 }}
          isMini={true}
          miniSize={'mini200'}
          resizeMode={'contain'}
        />
      )
    })
  }
  _onPressItem() {}
  _renderContent(data) {
    return (
      <View style={{ flexDirection: 'column' }}>
        <Text
          style={{
            fontSize: SizeUtils.translateFontSizeToCode(32),
            paddingLeft: SizeUtils.translateDesignWidthToCode(20),
            color: '#000000',
            fontWeight: 'bold'
          }}
        >
          {'data.title'}
        </Text>
      </View>
    )
  }
  _renderViewPage() {
    return <CommonViewPagerMultiShow ref={ref => (this._viewPager = ref)} type={Constants.SLIDER_TYPE.INDEX} />
  }
  _requestData() {
    this._viewPager.doRefresh()
    new QuanziRequestMoreRecommendListAction().call(this, {})
  }
  //中部几个按钮
  _renderMidView() {
    var midButtons = this.state.data
    if (midButtons.official && midButtons.official.length > 0) {
      return (
        <View
          style={{
            flexDirection: 'row',
            flexWrap: 'wrap',
            // padding: SizeUtils.translateDesignWidthToCode(30),
            marginTop: SizeUtils.translateDesignNumToCode(40),
            // marginBottom: SizeUtils.translateDesignNumToCode(40),
            backgroundColor: '#ffffff'
          }}
        >
          {midButtons.official.map((button, buttonIndex) => {
            return this._getPageButton(button, buttonIndex)
          })}
        </View>
      )
    }
  }
  _getPageButton(btnData, index) {
    return (
      <TouchableOpacity
        key={index}
        onPress={() => this._onPressPageBtn(btnData)}
        style={{
          flexDirection: 'column',
          width: SizeUtils.translateDesignWidthToCode(150),
          height: SizeUtils.translateDesignWidthToCode(130),
          marginBottom: SizeUtils.translateDesignNumToCode(40),
          alignItems: 'center'
        }}
      >
        <CommonAvatarView avatarUri={this._imgUrl(btnData)} size={100} />
        <Text
          style={[
            CommonStyles.secondaryText,
            {
              backgroundColor: '#00000000',
              marginTop: 2,
              color: '#666660',
              width: SizeUtils.translateDesignWidthToCode(120),
              textAlign: 'center',
              fontSize: SizeUtils.translateFontSizeToCode(25)
            }
          ]}
        >
          {btnData.title}
        </Text>
      </TouchableOpacity>
    )
  }
  _imgUrl(obj) {
    if (obj.image_urls && obj.image_urls.length > 0) {
      return obj.image_urls[0]
    }
    return ''
  }
  _onPressPageBtn(btnData) {
    this.gotoPage(Config.pages.quanzi_content, btnData)
  }
  _onCheckIsUserHeart(result, btnData) {
    // this.gotoPage(Config.pages.sport_dibiao_detail,{landmark_id:"59f89934ffc3c454575367e5"});
    if (result) {
      this.gotoPage(Config.getPageDataByKey(btnData.goto))
    }
  }
  _renderNavigationBarRightButtonContent() {
    return (
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <TouchableOpacity
          onPress={() => {
            this.gotoPage(Config.pages.home_search)
          }}
          style={{ marginRight: 15 }}
        >
          <TImage source={require('../../../resource/images/workhard/search2.png')} style={{ width: 34, height: 34 }} />
        </TouchableOpacity>
        <NoticeIcon isWhite={true} authorization={this.props.authorization} />
      </View>
    )
  }
  _showPopover(ref) {
    this._popoverbtn.measure((ox, oy, width, height, px, py) => {
      this.props.showMoreRightBtn &&
        this.props.showMoreRightBtn({ x: px - 20, y: Platform.OS !== 'ios' ? py - 5 : py - 30, width: 0, height: 45 })
    })
  }
  _renderTitleView() {
    return (
      <View
        style={{
          flexDirection: 'row',
          height: SizeUtils.translateDesignHeightToCode(Platform.OS === 'ios' ? 130 : 100),
          width: SizeUtils.getWindowSize().width,
          paddingTop:
            Platform.OS === 'ios' ? Config.tabBarTop : Config.tabBarTop + SizeUtils.translateDesignHeightToCode(20),
          justifyContent: 'space-between',
          borderBottomWidth: this.props.pageData.showBottomBorder == false ? 0 : SizeUtils.translateDesignNumToCode(3),
          borderColor: '#eeeeee',
          backgroundColor: '#ee3535'
        }}
      >
        <TouchableOpacity
          onPress={() => {
            this.goBack()
          }}
          disabled={!this.props.pageData.showLeftButton}
          style={{
            width: SizeUtils.translateDesignWidthToCode(200),
            paddingLeft: SizeUtils.translateDesignWidthToCode(40)
          }}
        >
          <View
            style={{
              flexDirection: 'row',
              height: SizeUtils.translateDesignHeightToCode(51),
              alignItems: 'center'
            }}
          >
            <Image
              source={require('../../../resource/images/common/Back-icon2.png')}
              style={{
                width: SizeUtils.translateDesignWidthToCode(24),
                height: SizeUtils.translateDesignWidthToCode(41)
              }}
            />
            <View
              style={{
                width: SizeUtils.translateDesignWidthToCode(200 - 40 - 24),
                paddingLeft: SizeUtils.translateDesignWidthToCode(5)
              }}
            />
          </View>
        </TouchableOpacity>
        <View style={{ height: SizeUtils.translateDesignNumToCode(30), marginTop: 0 }}>
          <Text
            style={{
              textAlign: 'center',
              fontSize: SizeUtils.translateFontSizeToCode(36),
              color: '#fff',
              fontFamily: 'STHeitiSC-Medium'
            }}
          >
            {' '}
            {'推荐'}{' '}
          </Text>
        </View>
        <View
          style={{
            width: SizeUtils.translateDesignWidthToCode(200),
            paddingRight: SizeUtils.translateDesignWidthToCode(40),
            alignItems: 'flex-end'
          }}
        >
          {this._renderNavigationBarRightButtonContent()}
        </View>
      </View>
    )
  }
}

export default QuanziTuiJianPage
